<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tbody>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>图像</th>
                    <th>性别</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                </tr>
                <tr align="center" v-for="{emp,index} in emps">
                    <td>{{index+1}}</td>
                    <td>{{emp.name}}</td>
                    <td>
                        <img src="emp.img" alt="" width="70px" height="50px">
                    </td>
                    <td>
                        <span v-if="emp.sex==true">男</span>
                        <span v-if="emp.sex==false">女</span>
                    </td>
                    <td>{{emp.job}}</td>
                    <td>{{emp.join_time}}</td>
                    <td>{{emp.work_time}}</td>
                </tr>
            </tbody>    
            <tr algn="center">
                <td>1</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                emps:[]
            },
            mounted(){
                axios.get("http://127.0.0.1:4523/m1/5204835-4870994-default/info_user").then(result=>{
                    console.log(result.data);
                    this.emps=result.data.data;
                    console.log(this.emps);
                })
            }
        })
    </script>
</body>
</html> -->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tbody>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>图像</th>
                    <th>性别</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                </tr>
                <tr align="center" v-for="(emp, index) in emps"  v-if="emp">
                    <td>{{ index + 1 }}</td>
                    <td>{{ emp.name || '姓名未知' }}</td>
                    <td>
                        <img v-if="emp.img" :src="emp.img" alt="" width="70px" height="50px">
                        <span v-else>无图像</span>
                    </td>
                    <td>
                        <span v-if="emp.sex">{{ emp.sex ? '男' : '女' }}</span>
                        <span v-else>未知</span>
                    </td>
                    <td>{{ emp.job || '职位未知' }}</td>
                    <td>{{ emp.join_time || '日期未知' }}</td>
                    <td>{{ emp.work_time || '时间未知' }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                emps: []
            },
            mounted() {
                axios.get("http://127.0.0.1:4523/m1/5204835-4870994-default/info_user")
                    .then(result => {
                        console.log(result.data);
                        if (result.data && result.data.data) {
                            this.emps = result.data.data;
                        } else {
                            console.error("Data format error:", result.data);
                        }
                    })
                    .catch(error => {
                        console.error("There was an error!", error);
                    });
            }
        })
    </script>
</body>
</html>